<%--
  Created by IntelliJ IDEA.
  User: 123
  Date: 2020/6/3
  Time: 14:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<%@include file="/common/com.jsp"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>职位页面</title>
</head>
<body>
<div id="root">

    <card>
       <shiro:hasPermission name="posit:add">

        <i-button  shape="circle" @click="add"> <Icon type="md-add-circle" /></i-button>
        </shiro:hasPermission>

  <shiro:hasPermission name="posit:grant">
            <i-Button type="primary" shape="circle" @click="grant"><Icon type="md-person" /></i-Button>
        </shiro:hasPermission>
    </card>
<i-table :columns="columns" :data="data" border height="400" @on-selection-change="tableSelect=arguments[0]">
    <template slot-scope="{row,index}" slot="action">
    <shiro:hasPermission name="posit:update">
        <i-Button type="info" size="large" @click="update(row,index)"><Icon type="md-create" /></i-Button>
        </shiro:hasPermission>


        <shiro:hasPermission name="posit:del">
        <i-Button type="error" size="large" @click="del(row,index)"><Icon type="ios-close-circle" /></i-Button>
        </shiro:hasPermission>


    </template>

</i-table>
    <Modal v-model="modalgrant" title="角色授权" @on-ok="dogrant">
        <Tree ref="tree" :data="treedata" show-checkbox multiple></Tree>
    </Modal>
    <Modal v-model="modaladd" title="添加职位" @on-ok="doadd">
    <i-Form :label-width="80">
        <Form-Item label="职位编号:">
            <Input type="text" v-model="posit.roleCode" placeholder="职位编号请输入数字">
        </Form-Item>
        <Form-Item label="职位名称:">
            <Input type="text" v-model="posit.roleName" placeholder="请输入职位名称">
        </Form-Item>
        <Form-Item label="描述:">
            <Input type="text" v-model="posit.roleMs" placeholder="请输入该职位描述">
        </Form-Item>
    </i-Form>
</Modal>
    <Modal v-model="modalupdate" title="修改职位" @on-ok="doupdate">
        <i-Form :label-width="80">
            <Form-Item label="职位编号:">
                <Input type="text" v-model="posit.roleCode" placeholder="职位编号请输入数字">
            </Form-Item>
            <Form-Item label="职位名称:">
                <Input type="text" v-model="posit.roleName" placeholder="请输入职位名称">
            </Form-Item>

            <Form-Item label="描述:">
                <%--<Input type="text" v-model="role.roleMs" placeholder="请输入描述">--%>
                <Input v-model="posit.roleMs" type="textarea" :rows="4" placeholder="请输入描述" />
            </Form-Item>
        </i-Form>
    </Modal>
    <Modal v-model="modalerr" title="查询所有" @on-ok="doerr">
        <div>
            <Card :bordered="false">
                <h3>职位编号:{{posit.roleCode}}</h3>
                <h3>职位名称:{{posit.roleName}}</h3>
                <h3>加入时间:{{posit.roleData}}</h3>
                <h3>修改时间:{{posit.roleDate}}</h3>
                <h3>职位描述:{{posit.roleMs}}</h3>

            </Card>
        </div>
    </Modal>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[

                {
                    type:'selection',
                    width: 80,
                    align:'center'
                },

                {title:"职位编号",key:"roleCode"},
                {title:"职位名称",key:"roleName"},
                {title:"加入时间",key:"roleData"},
                {title:"修改时间",key:"roleDate"},
                {title:"描述",key:"roleMs"},
                {title: "操作",slot:"action",width:240}
            ],
            data:[],
            posit:{},
            modaladd:false,
            modalupdate:false,
            modalgrant:false,
            treedata:[],
            modalerr:false,
        },
        mounted(){
            this.getRoleList();
        },
        methods:{
           getRoleList(){
                axios.get(`${apath}/sal/posit/list`)
                    .then(({data})=>{
                        this.data=data.result;
                    })
           },
            add(){
                this.posit={},
                    this.modaladd=true;
            },
          doadd(){
                axios.post(`${apath}/sal/posit/add`,this.posit)
              .then(({data})=>{
                  iview.Message.success({content:data.msg})
                  this.getRoleList();
              })
          },
            update(row,index) {
                this.posit = row;
                this.modalupdate = true;
            },
            doupdate(){
                let  params=Qs.stringify(this.posit,{serializeDate:(date)=>{
                    return moment(date).format("YYYY-MM-DD HH:mm")
                    }});
                axios.post(`${apath}/sal/posit/update`,Qs.parse(params))
                .then(({data})=>{
                    iview.Message.success({content:data.msg})
                    this.getRoleList()
                })
            },
            del(row,index){
                let _this =this;
                iview.Modal.confirm({
                    title:"确实要删除此部门？",
                    content:"此操作不可逆，请考虑清楚",
                    onOk(){
                        axios.get(`${apath}/sal/posit/del/${row.id}`)
                        .then(({data})=>{
                            iview.Message.success({content:data.msg})
                            _this.getRoleList()
                        })
                    }
                })
            },

            grant() {
                if(this.tableSelect.length!=1){
                    iview.Modal.confirm({
                        title:"页面提示",
                        content:"只能选择一项，请重新选择对象"
                    })
                    return;
                }
                axios.get(`${apath}/sal/posit/grant?roleId=${this.tableSelect[0].id}`)
                .then(({data})=>{
                    this.treedata=data.result;
                    this.modalgrant = true;
                })
            },
            dogrant(){
                let arr =this.$refs.tree.getCheckedAndIndeterminateNodes()
                .map(node=>"nid="+node.id).join("&");
                let param = "roleId="+this.tableSelect[0].id;
             let  params=param+"&"+arr;
             axios.get(`${apath}/sal/posit/dogrant?${params}`)
                .then(({data})=>{
                    iview.Message.success({content:data.msg})
                    this.getRoleList();
                })
            },
            err(row,index){
                this.posit = row;
                this.modalerr=true;
            },
            doerr(){
                let params=Qs.stringify(this.posit,{serializeDate:(data)=>{
                        return moment(data).format("YYYY-MM-DD HH:mm");
                    }});
                axios.get(`${apath}/sal/posit/err/${row.id}`,Qs.parse(params))
                    .then(({data})=>{
                        iview.Message.success({content:data.msg})
                        this.getRoleList();
                    })
            },
        }



    })
</script>
</html>
